<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<title>疫情分析系统</title>
		<link rel="stylesheet" href="./res/layui/css/layui.css">
		<link rel="stylesheet" href="./res/static/css/index.css">
		<link rel="icon" href="./images/favicon.ico">
		<link rel="stylesheet" href="./lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="./lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
		<link rel="stylesheet" href="./css/public.css" media="all">
		<script src="./highCharts/art-template.js"></script>
		<script src="./api/config.js"></script>
		<script src="./highCharts/jquery-3.2.1.js"></script>
	</head>
	<style>
		.layui-top-box {
			padding: 40px 20px 20px 20px;
			color: #fff
		}

		.panel {
			margin-bottom: 17px;
			background-color: #fff;
			border: 1px solid transparent;
			border-radius: 3px;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
		}

		.panel-body {
			padding: 15px
		}

		.panel-title {
			margin-top: 0;
			margin-bottom: 0;
			font-size: 14px;
			color: inherit
		}

		.label {
			display: inline;
			padding: .2em .6em .3em;
			font-size: 75%;
			font-weight: 700;
			line-height: 1;
			color: #fff;
			text-align: center;
			white-space: nowrap;
			vertical-align: baseline;
			border-radius: .25em;
			margin-top: .3em;
		}

		.layui-red {
			color: red
		}

		.main_btn>p {
			height: 40px;
		}
	</style>
	<body>
		<!-- nav部分 -->
		<div class="nav index">
			<div class="nav-logo">
				<a href="./status.html">
					<img src="./res/static/img/logo.png" width="65" style="margin-left: 20px;">
				</a>
			</div>

			<div class="layui-container">
				<div class="nav-list">
					<ul class="layui-nav" lay-filter="" style="margin: 0 -50px;">
						<li class="layui-nav-item layui-this"><a href="status.html">疫情现状</a></li>
						<li class="layui-nav-item"><a href="nat.html">核酸检测</a></li>
						<li class="layui-nav-item"><a href="news.html">疫情新闻</a></li>
						<li class="layui-nav-item"><a href="virus.html">专题展示</a></li>
						<li class="layui-nav-item"><a href="way.html">出行速查</a></li>
						<li class="layui-nav-item"><a href="resident.html">居民上报</a></li>
						<li class="layui-nav-item"><a href="hospital.html">医院速查</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- main部分 -->
		<div class="main product">
			<div class="layui-container">
				<div class="content layui-row">
					<div class="layuimini-container">
						<div class="layuimini-main layui-top-box">
							<div class="layui-row layui-col-space10">

								<div class="layui-col-md3">
									<div class="col-xs-6 col-md-3">
										<div class="panel layui-bg-red">
											<div class="panel-body">
												<div class="panel-title">
													<h5>总确诊数</h5>
												</div>
												<br>
												<div class="panel-content">
													<h1 class="no-margins" id="a1"></h1>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="layui-col-md3">
									<div class="col-xs-6 col-md-3">
										<div class="panel layui-bg-orange">
											<div class="panel-body">
												<div class="panel-title">
													<h5>总疑似数</h5>
												</div>
												<br>
												<div class="panel-content">
													<h1 class="no-margins" id="a2"></h1>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="layui-col-md3">
									<div class="col-xs-6 col-md-3">
										<div class="panel layui-bg-green">
											<div class="panel-body">
												<div class="panel-title">
													<h5>总治愈数</h5>
												</div>
												<br>
												<div class="panel-content">
													<h1 class="no-margins" id="a3"></h1>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="layui-col-md3">
									<div class="col-xs-6 col-md-3">
										<div class="panel layui-bg-black">
											<div class="panel-body">
												<div class="panel-title">
													<h5>总死亡数</h5>
												</div>
												<br>
												<div class="panel-content">
													<h1 class="no-margins" id="a4"></h1>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- footer部分 -->
		<!-- <div class="footer">
			<div class="layui-container">
				<div class="layui-row footer-contact">
					<div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
						<p class="contact-top"><span class="right">病毒分析系统开发人 </span></p>
					</div>
				</div>
			</div>
		</div> -->
		<script src="./res/layui/layui.js"></script>
		<script>
			layui.config({
				base: '../res/static/js/'
			}).use('firm');

            function initData() {
                $.ajax({
                    url: "http://localhost:8080/admin/vaccine/status/queryStatusStatusInfo",
                    type:"post",
					data:"",
                    success:function(data){
						// console.log("data.data.info = " + data.data.info);
						var arr = data.data.info;
						$('#a1').html(0);
                        $('#a2').html(0);
                        $('#a3').html(0);
                        $('#a4').html(0);
						for (var i = 0; i < arr.length; i++) {
							console.log(i + " - info  = " + arr[i].info);
							console.log(i + " - count  = " + arr[i].count);
							console.log("===================");
							if(arr[i].info == '确诊'){
								$('#a1').html(arr[i].count);
							}else if(arr[i].info == '疑似'){
								$('#a2').html(arr[i].count);
							}else if(arr[i].info == '治愈'){
								$('#a3').html(arr[i].count);
							}else if(arr[i].info == '死亡'){
								$('#a4').html(arr[i].count);
							}
						}
                    },
                    error:function(data){
                        layer.alert("添加失败!")
                    }
                });
            }

            initData();
		</script>
	</body>
</html>
